import React, { forwardRef, useEffect, useState } from 'react'
import {  Form, Input, Select } from 'antd'
const UserForm=forwardRef((props,ref)=> {
    const [form] = Form.useForm();
    const { Option } = Select;
    const [isDisabled,setisDisabled]=useState(false)
    const {roleId,region} =JSON.parse(localStorage.getItem("token"))
    const roleObj={
        '1':"superadmin",
        '2':"admin" ,
        '3':"editor"
    }
    useEffect(()=>{
        setisDisabled(props.isUpdataDisable)
    },[props.isUpdataDisable])
    const checkRegionDisabled=(item)=>{
        if (props.isUpdate) {
            if (roleObj[roleId]==='superadmin') {
                return false
            } else {
                return true 
            }
        } else {
            if (roleObj[roleId]==='superadmin') {
                return false
            } else {
                return item.value!==region
            }
        }
    }
    const checkRoleDisabled=(item)=>{
        if (props.isUpdate) {
            if (roleObj[roleId]==='superadmin') {
                return false
            } else {
                return true 
            }
        } else {
            if (roleObj[roleId]==='superadmin') {
                return false
            } else {
                return  roleObj[item.id] !=='editor'
            }
        }
    }
    return (

        <Form
            form={form}
            ref={ref}
        // layout="vertical"
        >
            <Form.Item
                name="username"
                label="用户名"
                rules={[{ required: true, message: '请输入用户名' }]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                name="password"
                label="密码"
                rules={[{ required: true, message: '请输入密码' }]}
            >
                <Input />
            </Form.Item>
            <Form.Item name="region" label="区域" className="collection-create-form_last-form-item"
            rules={isDisabled? []:[{ required: true, message: '请选择区域' }]}
            >
                <Select
                disabled={isDisabled}
                    placeholder="Select a option and change input text above"
                    // onChange={onGenderChange}
                    allowClear
                >
                    {
                        props.regionList.map((item) => {
                            return <Option key={item.id} value={item.title}
                            disabled={checkRegionDisabled(item)}
                            >{item.title}</Option>
                        })
                    }
                </Select>
            </Form.Item>
            <Form.Item name="roleId"
             label="角色" 
             className="collection-create-form_last-form-item"
             rules={[{ required: true, message: '请选择角色' }]}
             >
                <Select
                onChange={(value)=>{
                    if (value===1){
                        setisDisabled(true)
                        ref.current.setFieldsValue({
                            region:""
                        })
                    }else{
                        setisDisabled(false)
                    }
                }}
                    placeholder="Select a option and change input text above"
                    // onChange={onGenderChange}
                    allowClear
                >
                    {
                        props.roleList.map((item) => {
                            return <Option key={item.id} value={item.id} disabled={checkRoleDisabled(item)}>{item.roleName}</Option>
                        })
                    }
                </Select>
            </Form.Item>
        </Form>

    )
})

export default UserForm
